﻿@page "/components/datepicker"

<DocsPage>
    <DocsPageHeader Title="Date Picker">
        <Description>Provides the user with a simple way to select a date.</Description>
        </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader>
                <Title>Basic Usage</Title>
                <Description>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">Note: Always use the two-way binding <CodeInline>@@bind-Date</CodeInline> to bind to a field of type <CodeInline>DateTime?</CodeInline></MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DatePickerBasicUsageExample/>
            </SectionContent>
            <SectionSource Code="DatePickerBasicUsageExample" GitHubFolderName="DatePicker"/>
        </DocsPageSection>
                
        <DocsPageSection>
            <SectionHeader>
                <Title>Internationalization</Title>
                <Description>When you set the <CodeInline>Culture</CodeInline> parameter the DatePicker will use culture specific month names, weekday names and even different calenders.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <DatePickerInternationalizationExample />
            </SectionContent>
            <SectionSource Code="DatePickerInternationalizationExample" GitHubFolderName="DatePicker" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Dialog Mode</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DatePickerDialogExample/>
            </SectionContent>
            <SectionSource Code="DatePickerDialogExample" GitHubFolderName="DatePicker"/>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Static Mode</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <DatePickerStaticExample/>
            </SectionContent>
            <SectionSource Code="DatePickerStaticExample" GitHubFolderName="DatePicker"/>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Different views</Title>
                <Description>By default it opens to Date, but can be set to Year or Month.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DatePickerViewsExample/>
            </SectionContent>
            <SectionSource Code="DatePickerViewsExample" GitHubFolderName="DatePicker"/>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Colors</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true" Class="demo-datetime-margin">
                <DatePickerColorExample/>
            </SectionContent>
            <SectionSource Code="DatePickerColorExample" GitHubFolderName="DatePicker"/>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Elevation</Title>
                <Description>You can change the elevation with the <CodeInline>Elevation</CodeInline> parameter the default value is 0 for static and 8 for inline.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <DatePickerElevationExample/>
            </SectionContent>
            <SectionSource Code="DatePickerElevationExample" GitHubFolderName="DatePicker"/>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Range Picker Usage</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DateRangePickerUsageExample/>
            </SectionContent>
            <SectionSource Code="DateRangePickerUsageExample" GitHubFolderName="DatePicker"/>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>